<!-- schedule 表单弹窗 -->
<form id="schedule-form" lay-filter="schedule-form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <input id="paramsJson" name="paramsJson" type="hidden"/>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">所属任务<span style="color: red">*</span></label>
            <div class="layui-input-inline">
                <select name="taskCode" lay-search lay-verify="required">
                    <option value=""></option>
                    <option th:each="task : ${tasks}" th:value="${task.code}" th:text="${task.code} + ' - ' + ${task.name}"></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">计划编码</label>
            <div class="layui-input-inline">
                <input name="code" placeholder="如不输入系统自动生成" type="text" class="layui-input" maxlength="32"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">计划名称<span style="color: red">*</span></label>
            <div class="layui-input-inline">
                <input name="name" placeholder="请输入计划名称" type="text" class="layui-input" maxlength="64" lay-verify="required"/>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">处理业务类<span style="color: red">*</span></label>
            <div class="layui-input-block" style="width: 515px;">
                <input name="interfaceName" placeholder="要求类全限定名(带package)" type="text" class="layui-input" maxlength="64" lay-verify="required"/>
            </div>
        </div>
        <!--<div class="layui-inline">
            <label class="layui-form-label">服务器IP</label>
            <div class="layui-input-inline">
                <input name="serverIp" placeholder="请输入服务器IP" type="text" class="layui-input" maxlength="64"/>
            </div>
        </div>-->
        <div class="layui-inline">
            <label class="layui-form-label">依赖计划</label>
            <div class="layui-input-inline">
                <select name="dependencies" xm-select="dependencies" xm-select-max="1">
                    <option value=""></option>
                    <option th:each="schedule : ${schedules}" th:value="${schedule.id}" th:text="${schedule.name}"></option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">计划描述</label>
        <div class="layui-input-block" style="width: 515px;">
            <textarea name="description" placeholder="请输入描述内容" class="layui-textarea" maxlength="255"></textarea>
        </div>
    </div>
    <hr>
    <!--定时任务执行时间-->
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">启动时间<span style="color: red">*</span></label>
            <div class="layui-input-inline" style="width: 115px;">
                <select id="cronType" name="cronType" lay-filter="cronType" lay-verify="required">
                    <option th:each="cronType : ${cronTypes}" th:value="${cronType.value}" th:text="${cronType.label}"></option>
                </select>
            </div>

            <div class="layui-input-inline" style="width: 35px;">
                <input type="text" id="cronSecond" name="cronSecond" placeholder="秒" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 35px;">
                <input type="text" id="cronMinute" name="cronMinute" placeholder="分" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 35px;">
                <input type="text" id="cronHour" name="cronHour" placeholder="时" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 35px;">
                <input type="text" id="cronDay" name="cronDay" placeholder="日" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 35px;">
                <input type="text" id="cronMonth" name="cronMonth" placeholder="月" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 35px;">
                <input type="text" id="cronDayOfWeek" name="cronDayOfWeek" placeholder="周" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <hr>
    <!--任务所需参数-->
    <div class="layui-form-item">
        <label class="layui-form-label">参数添加</label>
        <div class="layui-input-block" style="width: 515px;">
            <div class="layui-form toolbar">
                <a id="param-btn-add" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-add-1"></i> 添加一行</a>
            </div>

            <table class="layui-table" id="param-table" lay-filter="param-table"></table>
        </div>
    </div>


    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" type="button" app-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="schedule-form-submit" lay-submit>保存</button>
    </div>
</form>

<!-- 表格操作列 -->
<script type="text/html" id="param-table-bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" lay-id="{{d.tempId}}">删除</a>
</script>

<script>
    layui.use(['jquery', 'layer', 'table', 'admin', 'form', 'formSelects'], function () {
        const layer = layui.layer;
        const admin = layui.admin;
        const form = layui.form;
        const table = layui.table;
        const $ = layui.jquery;
        const formSelects = layui.formSelects;

        form.render('select');

        /**数据回显*/
        let params = [];
        let url = basePath + 'batch/schedule/add';
        // 回显schedule数据
        const schedule = admin.getTempData('t_schedule');
        if (schedule) {
            url = basePath + 'batch/schedule/update';
            form.val('schedule-form', schedule);
            // 依赖计划回显
            const dependencies = schedule.dependencies;
            if (dependencies) {
                const pds = [];
                for (let i = 0; i < dependencies.length; i++) {
                    pds.push(dependencies[i].id);
                }
                formSelects.value('dependencies', pds);
            }

            // cron 表达式回显
            setCronTab(schedule.cronExpression);

            // 回显参数
            params = schedule.params;
        }


        /**参数添加 START */
        const paramTableId = "paramTable";
        table.cache[paramTableId] = null;
        // 渲染表格
        const tableIns = table.render({
            elem: '#param-table',
            id: paramTableId,
            cols: [
                [
                    {type: 'numbers', fixed: 'left'},
                    {field: 'paramName', title: '参数名称', edit: 'text'},
                    {field: 'paramValue', title: '参数值', edit: 'text'},
                    {field: 'tempId', title: '操作', align: 'center', toolbar: '#param-table-bar'}
                ]
            ],
            data: params
        });

        // 添加一行按钮点击事件
        $('#param-btn-add').click(function () {
            let oldData = table.cache[paramTableId];
            // 新增数据需要初始化
            if (typeof(oldData) === "undefined" || !oldData) {
                oldData = [];
            }
            const newRow = {tempId: new Date().valueOf(), paramName: null, paramValue: null};
            oldData.push(newRow);
            tableIns.reload({
                data: oldData
            });
        });

        // 工具条点击事件
        table.on('tool(param-table)', function (obj) {
            const layEvent = obj.event;
            if (layEvent === 'del') { //删除一行
                obj.del();
                removeEmptyTableCache();
            }
        });

        // 删除一行
        function removeEmptyTableCache() {
            const oldData = table.cache[paramTableId];
            for (let i = 0; i < oldData.length; i++) {
                const row = oldData[i];
                if (!row || !row.tempId) {
                    oldData.splice(i, 1);    //删除一项
                }

            }
            tableIns.reload({
                data: oldData
            });
        }

        /**参数添加 END */

        /** cron 表达式 Start*/
        const contCronArr = ["", "", "0#*#*#*#*#?", "0#0#*#*#*#?", "0#0#0#*#*#?", "0#0#0#0#*#?", "0#0#0#0#0#*"];
        form.on('select(cronType)', function (data) {
            const val = data.value;
            setCronTab(contCronArr[val]);
        });

        // 后端依次获取各段时间，然后拼接
        function setCronTab(cronTabStr) {
            const cronArr = cronTabStr.trim().split("#");
            $("#cronSecond").val(cronArr[0]);
            $("#cronMinute").val(cronArr[1]);
            $("#cronHour").val(cronArr[2]);
            $("#cronDay").val(cronArr[3]);
            $("#cronMonth").val(cronArr[4]);
            $("#cronDayOfWeek").val(cronArr[5]);
        }

        /** cron 表达式 End*/


        // 表单提交事件
        form.on('submit(schedule-form-submit)', function (data) {
            layer.load(2);
            const params = JSON.stringify(table.cache[paramTableId]);
            data.field.paramsJson = params;
            $.post(url, data.field, function (data) {
                layer.closeAll('loading');
                if (data.success) {
                    layer.msg(data.msg, {icon: 1});
                    admin.finishPopupCenter();
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            });
            return false;
        });
    });
</script>